<template>
  <div v-if="!loginOpen">
    <el-button link type="primary" @click="handleLogin" size="large">请登录</el-button>
    <el-dialog v-model="dialogTableVisible" width="600" @open="handleClose" :title="`用户${loginText}`">
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="auto">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formData.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="formData.password"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="radioValue" v-if="!enrolment">
          <el-radio-group v-model="formData.radioValue">
            <el-radio value="1">用户</el-radio>
            <el-radio value="2">管理员</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname" v-else>
          <el-input v-model="formData.nickname"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button type="primary" @click="handleSubmit">{{ loginText }}</el-button>
        <el-button @click="enrolment = !enrolment">{{ enrolmentText }}</el-button>
      </template>
    </el-dialog>
  </div>
  <div v-else>
    <el-dropdown>
      <el-avatar :src="loginAvatar" class="avatar"></el-avatar>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="handleLoginEntry">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

  </div>
</template>

<script lang="ts" setup>
import { ref, computed, reactive, watch } from 'vue';
import { login, loginCreate } from "@/api/modules/index"
import { useHandleData } from "@/hooks/useHandleData"
import { useUserStore } from '@/stores/use';
const userStore = useUserStore();
const dialogTableVisible = ref(false);
const formRef = ref();
const formData = reactive({
  username: '',
  password: '',
  radioValue: '',
  nickname: '',
});
const enrolment = ref(false);
const loginOpen = ref(false)
const loginText = computed(() => enrolment.value ? '注册' : '登录');
const enrolmentText = computed(() => enrolment.value ? '返回登录' : '注册');
const formRules = ref();
const loginAvatar = computed(() => {
  if (userStore.avatar === '') return "public/avatar.png"
  else return userStore.avatar

})
watch(enrolment, (val) => {
  if (val) {
    // 注册时
    formRules.value = {
      username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
      password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
    }
  } else {
    // 登录时
    formRules.value = {
      username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
      password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      radioValue: [{ required: true, message: '请选择类型', trigger: 'change' }],
    }
  }
}, { immediate: true })

const handleLogin = () => {
  dialogTableVisible.value = true;
}
const handleSubmit = async () => {
  await formRef.value.validate();
  if (formData.username == '' || formData.password == '' || formData.username == null || formData.password == null) {
    return
  }
  const params = {
    account: formData.username,
    password: formData.password,
    name: formData.nickname
  }

  if (enrolment.value) {
    await useHandleData(loginCreate, params, '注册', 'success')
  } else {
    const res = await useHandleData(login, params, '登录', 'success') as { data?: { data?: { token?: string; id?: number, avatar?: string } } };
    userStore.username = formData.username
    userStore.password = formData.password
    userStore.radioValue = formData.radioValue || '1'
    userStore.token = res.data?.data?.token || ''
    userStore.id = res.data?.data?.id || 0
    userStore.avatar = res.data?.data?.avatar || ''
    loginOpen.value = true
    userStore.login = true;

  }
  dialogTableVisible.value = false;
};

const handleClose = () => {
  enrolment.value = false;
  (Object.keys(formData) as Array<keyof typeof formData>).forEach(key => {
    formData[key] = '';
  })
  formRef.value.clearValidate();
}
const handleLoginEntry = () => {
  userStore.login = false;
  loginOpen.value = false;
  userStore.token = ''
  userStore.id = -1
  userStore.avatar = ''
  userStore.username = ''
  userStore.password = ''
  userStore.radioValue = ''
  userStore.commentInput = -1
  userStore.articleId = -1
}
</script>
<style scoped>
.avatar {
  width: 30px;
  height: 30px;
}
</style>
